<template>
	<view>
		<view class="content">
			<view class="head_img">
				<view @click="$to('/pages/logistics/logistics')">
					<view class="white"></view>
					<image :src="list.outimg" class="img"></image>
				</view>
			</view>
			<view class="item_info" v-if="list.authority">
				<view class="left">
					<view class="label">身份</view>
					<view class="value" style="color: #fbd74f !important;">{{ list.authority }}</view>
				</view>
			</view>
			<view class="item_info" v-for="(item, index) in label_value" :key="index">
				<view class="left">
					<text class="label">{{ item.label }}</text>
					<text class="value" :user-select="true" :selectable="true" v-if="item.value == 'gender_text'" >{{ list[item.value] }}</text>
					<text class="value" :user-select="true" :selectable="true" v-else-if="item.value == 'address'">{{ list[item.value] || '未填写' }}</text>
					<text class="value" :user-select="true" :selectable="true" v-else>{{ list[item.value] }}</text>
				</view>
			</view>
			<view class="item_info" v-if="list.photo.length != 0 && list.photo != ''">
				<view class="left">
					<view class="label">照片墙</view>
					<view class="value">
						<scroll-view scroll-x="true" style="white-space: nowrap;">
							<view class="scroll_view" v-for="(item, index) in list.photo" :key="index">
								<u-image height="400rpx" @click="$viewImg(list.photo, index)" :src="item" mode="heightFix"></u-image>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="item_info" v-if="!!list.longitude && !!list.latitude">
				<view class="left">
					<view class="u-flex">
						<view class="label">地理位置</view>
						<view class="ck" @click="openMap">查看位置</view>
					</view>
					<view class="value"><map scale="15" :longitude="list.longitude" :latitude="list.latitude" style="width: 100%; height: 500rpx;" :markers="markers"></map></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { public_user_info } from '@/api/index.js';
export default {
	data() {
		return {
			share: {
				title: ''
			},
			list: {},
			label_value: [
				{
					label: '昵称',
					value: 'name'
				},
				{
					label: '性别',
					value: 'gender_text'
				},
				{
					label: '个人介绍',
					value: 'description'
				},
				{
					label: '地区',
					value: 'address'
				}
			],
			markers: []
		};
	},
	onLoad(data) {
		this.getUserInfo(data.id);
	},
	methods: {
		openMap() {
			uni.openLocation({
				latitude: parseFloat(this.list.latitude),
				longitude: parseFloat(this.list.longitude),
				success: function() {
					console.log('打开地图');
				}
			});
		},
		getUserInfo(id) {
			//获取用户信息
			uni.showLoading({
				title: '正在加载资料中..'
			});
			public_user_info(id)
				.then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.code == 200) {
						this.list = res.data;
						this.list.photo = res.data.photo.split(',');
						this.share.title = res.data.name + ' 的个人信息';
						this.markers[0] = {
							id: res.data.id,
							width: 20,
							height: 20,
							longitude: res.data.longitude,
							latitude: res.data.latitude,
							iconPath: '../../static/img/map/bind.png',
							callout: {
								content: 'Ta在这里',
								color: '#fff',
								bgColor: '#4CD964',
								padding: '5',
								borderRadius: '30',
								display: 'ALWAYS'
							}
						};
					}
				})
				.catch(err => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.scroll_view {
		height: 400rpx;
		display: inline-block;
		margin-right: 10rpx;
		image {
		}
	}
	.btn_exit {
		margin: 80rpx 40rpx 40rpx;
		border-radius: 50rpx;
		padding: 20rpx 0;
		text-align: center;
		color: #a4a4a4;
		border: 1rpx solid #dbdbdb;
		&:active {
			background-color: #f4f4f4;
		}
	}
	.head_img {
		font-size: 0;
		display: flex;
		padding: 50rpx 0;
		> view {
			margin: auto;
			position: relative;
			&:active {
				.white {
					background-color: rgba(255, 255, 255, 0.2);
				}
			}
			.white {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				border-radius: 50%;
				z-index: 10;
			}
		}
		.img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			box-shadow: 0 4rpx 0 8rpx #fff, 0 12rpx 35rpx 4rpx rgba(0, 0, 0, 0.2);
		}
	}
	.item_info {
		display: flex;
		padding: 40rpx 25rpx;
		position: relative;
		transition: 0.3s;
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 25rpx;
			right: 25rpx;
			border-bottom: 1rpx solid #eee;
			z-index: 1;
		}
		&:active {
			background-color: #f4f4f4;
		}
		.left {
			width: 100%;
			display: flex;
			flex-direction: column;
			.label {
				color: #a4a4a4;
				font-size: 24rpx;
			}
			.ck {
				color: #454545;
				font-size: 30rpx;
				margin: auto 0 auto auto;
			}
			.value {
				width: 100%;
				padding-top: 20rpx;
				font-size: 32rpx;
				color: #000;
			}
		}
		.right {
			margin: auto 0 auto auto;
		}
	}
}
</style>
